<template>
  <div style="margin-left: 30px;">
    <div>
      <h2 style="text-align:left;color:#fff">
        <i class="el-icon-upload" style="font-size:25px"></i>&nbsp;个人收藏
      </h2>
      <hr style="text-align:left;margin-left: 0px;width:150px;height:5px;border:none;background-color:#4074bf" />
    </div>


    <div style="column-count:3;column-gap:30px;margin-top:20px;">
      <el-tooltip :disabled="disabled" effect="dark" placement="right" v-for="item in userCollect " :key="item.id">
        <h3 slot="content">{{item.dishes.dishesName}}</h3>
        <div slot="content" v-for="di in item.dishes.dishesIngredients " :key="di.id" style="width:150px">
          <el-row>
            <el-col :span="15">
              <p>{{di.ingredientsName}}</p>
            </el-col>
            <el-col :span="5">
              <p>{{di.ingredientsNum}}</p>
            </el-col>
            <el-col :span="4">
              <p>{{di.ingredientsUnit}}</p>
            </el-col>
          </el-row>
        </div>

        <el-card class="box-card cardStyle" :body-style="{ padding: '0px' }">

          <el-image class="imgStyle" :src="item.dishes.dishesImg" fit="cover"></el-image>

          <el-tag class="tagStyle" :type="tagClassify(item.dishes.dishesTag)" effect="dark" size="mini">
            {{item.dishes.dishesTag}}
          </el-tag>

          <!-- 注：此处 e-image 添加点击事件会使滚动条消失，div作为覆盖层盖在上面完成点击事件--by hui  -->
          <div style="width: 210px;height: 210px;position: absolute;margin-top:-210px"
            @click="viewDetails(item.dishes.dishesId);getDishesinfoUser(item.dishes.dishesUser)"></div>

          <h3 class="h3Style" @click="viewDetails(item.dishes.dishesId);getDishesinfoUser(item.dishes.dishesUser)">
            {{item.dishes.dishesName}}</h3>


          <p class="pStyle"><img class="iconStyle" src="../../../assets/good.png" width="18px">{{item.dishes.dishesGoodnum}}
          </p>

          <!-- <el-avatar :size="50" src="../../../assets/001.png" style="border:3px solid #BBDDFF">
                <img src="../../../assets/001.png" />
            </el-avatar> -->
        </el-card>

      </el-tooltip>
    </div>
    <DishesInfo ref="dinfo"></DishesInfo>

  </div>
</template>

<script>
  import DishesInfo from "../../share/util/DishesInfo"

  import {
    getInfo,
    checkAttention,
    checkCollect,
    checkGood,
    getListCollect
  } from '@/api/accountApi.js';

  import {
    mapState,
    mapGetters
  } from 'vuex'

  export default {
    name: 'Show',
    components: {
      DishesInfo,
    },
    data() {
      return {
        disabled: false, //控制提示
      }
    },
    computed: {
      ...mapState(['menus', 'userInfo','userCollect']),
      ...mapGetters(['inforMenus', 'getDishesInfo'])
    },
    methods: {
      //Tag判断
      tagClassify(dishesTag) {
        if (dishesTag === '原创') return this.tagtype = 'success'
        if (dishesTag === '范本') return this.tagtype = 'warning'
        if (dishesTag === '翻制') return this.tagtype = 'danger'
      },
      viewDetails(id) {
        this.$refs.dinfo.DishesInfoVisible = true;
        this.$store.commit('selectDishesId', id);
        this.checkTwo();
      },
      getDishesinfoUser(id) {
        getInfo(id).then(resp => {
          this.$store.commit('getDishesUserInfo', resp.data)
          checkAttention(this.userInfo.infoId, resp.data.infoId).then(resp => {
            this.$store.commit('setIsAttention', resp.data)
          })
        })
      },
      checkTwo() {
        checkCollect(this.getDishesInfo[0].dishesId, this.userInfo.accountId).then(resp => {
          this.$store.commit('setIsCollect', resp.data)
        })
        checkGood(this.getDishesInfo[0].dishesId, this.userInfo.accountId).then(resp => {
          this.$store.commit('setIsGood', resp.data)
        })
      }
    },
    created() {
      getListCollect(this.$store.state.user.userId).then(resp => {
        this.$store.commit('setUserCollect',resp.data);
      })
    }
  }
</script>

<style scoped>
  .cardStyle {
    width: 210px;
    margin-bottom: 30px;
    break-inside: avoid;
  }

  .imgStyle {
    width: 210px;
    height: 210px;
    z-index: 0;
  }

  .tagStyle {
    position: absolute;
    margin-left: -200px;
    margin-top: 10px;
  }

  .h3Style {
    margin-top: 8px;
    height: 25px;
  }

  .pStyle {
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
    color: #0090FF;
    margin-top: -5px;
  }

  .iconStyle {
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -3px;
  }
</style>

<style>
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
</style>